<template>
  <div class="dz-dhs-sale-reward">
    <div class="dz-sale-reward-box">
      <div class="dz-sale-reward-contanier">
        <ul class="dz-sale-reward-content clearfix" v-if="dz_xsj == '0'">
          <li>
            <div class="item-dz-sale-reward" @click="onClickBtn(1)">
              <p>
                <strong class="fontGilroy">
                  <i>&yen;</i>
                  {{waitData.wait_profit}}
                </strong>
                待收益(元)
              </p>
            </div>
          </li>
          <li>
            <div class="blocked" @click="onClickBtn(2)">
              <p>
                <strong class="fontGilroy">
                  <i>&yen;</i>
                  {{waitData.wait_send}}
                </strong>
                待发放(元)
              </p>
            </div>
          </li>
          <li>
            <div class="item-dz-sale-reward third-child" @click="onClickBtn(3)">
              <p>
                <strong class="fontGilroy">
                  <i>&yen;</i>
                  {{waitData.earned}}
                </strong>
                已收益(元)
              </p>
            </div>
          </li>
          <li>
            <div class="blocked" @click="onClickBtn(4)">
              <p>
                <strong class="fontGilroy">
                  <i>&yen;</i>
                  {{waitData.issued}}
                </strong>
                已发放(元)
              </p>
            </div>
          </li>
        </ul>
        <ul class="dz-sale-reward-content clearfix" v-else>
          <li class="dz-xsj">
            <div class="item-dz-sale-reward">
              <p>
                <strong class="fontGilroy">
                  <i>&yen;</i>
                  {{waitData.wait_profit}}
                </strong>
                待收益(元)
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="lists-top">
      <search :searchInfo="searchInfo" @search="searchFn"></search>
      <lists-nav :navData="navData" @changeOrderType=changeOrderType></lists-nav>
    </div>
    <div class="lists-wrapper">
      <lists-all></lists-all>
    </div>
  </div>
</template>

<script>
import Vue from "vue"
import Search from '@/components/Search/index'
import listsNav from './components/listsNav/index'
import listsAll from './components/listsAll/index'
export default Vue.extend({

  data() {
    return {
      searchInfo: {
        placeholder: '订单编号'
      },
      navData: {
        is_allow_exchange: 1,
        is_allow_return: 1,
        ftitle_pending_pay: '待收益',
        ftitle_has_shipped: '待确认',
        ftitle_return_goods: '已确认',
        curType: null
      },
      dzStatus: 1,
      waitData: {},
      dz_xsj: '0'
    }
  },

  methods: {
    // 切换是否当前是待收益还是待发放
    onClickBtn(index) {
      this.dzStatus = index
      this.navData.curType = null
      if (index != 3 && index != 4) {
        this.navData.curType = 0
        this.$Bus.$emit('statusEvent', { status: null, dzStatus: index })
        if (index == 1) {
          this.navData.ftitle_pending_pay = '待收益'
        } else {
          this.navData.ftitle_pending_pay = '待发放'
        }
      } else if (index == 3) {
        this.navData.curType = 2
        this.$Bus.$emit('statusEvent', { status: 2, dzStatus: 1 })
      } else if (index == 4) {
        this.navData.curType = 2
        this.$Bus.$emit('statusEvent', { status: 1, dzStatus: 0 })
      }
    },
    // 切换订单类型
    changeOrderType(type) {
      this.navData.curType = type || null
      const dzStatus = this.dzStatus
      this.$Bus.$emit('statusEvent', { status: type, dzStatus: dzStatus })
    },
    // 点击搜索
    searchFn(keyword) {
      this.$Bus.$emit('keywordEvent', { keyword: keyword })
    }
  },

  created() {
    var that = this
    this.$Bus.$on('waitData', function(option) {
      // console.log(option)
      that.waitData = option
    })
    const dz_xsj = window.localStorage.getItem('dz_xsj')
    this.dz_xsj = dz_xsj
  },
  components: {
    Search,
    listsNav,
    listsAll
  }
})
</script>

<style lang='scss'>
  @import "../../../../styles/mixin";
  .dz-dhs-sale-reward {
    overflow: hidden;
    .dz-sale-reward-box {
      position:fixed;
      top:0;
      left:0;
      z-index:10;
      width:100%;
      background: #fff;
    }
    .dz-sale-reward-contanier {
      width: 700px;
      height: 328px;
      background: url("https://img.wifenxiao.com/h5-wfx/images/user/cash_bg.png") center top
        no-repeat #f4f4f4;
      background-size: 100%;
      margin: 25px auto;
      .dz-sale-reward-content {
        padding: 30px 0 41px 0;
        .third-child::after {
            content: "";
            height: 80px;
            width: 0;
            border-right: 1px solid #ff7c86;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        li {
          padding: 15px;
          width: 50%;
          float: left;
          color: #ffd9dd;
          position: relative;
          p {
            font-size: 26px;
            font-weight: 500;
            text-align: center;
          }
          &:first-child {
            &::after {
              content: "";
              height: 80px;
              width: 0;
              border-right: 1px solid #ff7c86;
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }
          strong {
            display: block;
            font-size: 50px;
            margin-bottom: 30px;
            font-weight: normal;
            letter-spacing: 3px;
            max-width: 99%;
            color: #fff;
            @include showEllipsis;
            i {
              display: inline-block;
              font-size: 28px;
              margin-right: 8px;
            }
          }
        }
      }
    }
    .lists-top{
      position:fixed;
      top:368px;
      left:0;
      z-index:10;
      width:100%;
      border-radius: 0 0 20px 20px;
      overflow: hidden;
      background: #fff;
    }
    .lists-wrapper{
      padding-top:580px;
    }
  }
  .dz-dhs-sale-reward .dz-sale-reward-contanier .dz-sale-reward-content .dz-xsj {
    width: 100%;
  }
</style>
